{% extends "index.html" %}

{% from "util.html" import dropdown %}

{% block main %}
<style>
    #form-mod-pwd, #form-change-class, #form-report {
        display: none;
    }
</style>
<div class="app-body pl-4 pr-4 pt-4 pos-top">   
    <div class="col-sm-12 text-left pos-top">
        <h2 class="titleText text-left mt-4 mb-2">设置</h2>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <p class="mb-2"><b>账户</b></p>
        </div>
        <div class="col-sm-12">
            <ul class="menu-item-two list-inline">
                <li class="list-inline-item d-block p-0 mr-0 list-view">
                    <a id="mod-pwd" class="last-arrow bb-no"><span class="ti-trash mr-3"></span>修改密码</a>
                    <form id="form-mod-pwd" method="post" action="/mod-pwd">
                        <div class="input-group mb-3 mt-3 bg-white">
                            <input class="form-control form-control-lg" for="id" name="id" id="id" type="password" placeholder="旧密码">
                        </div>
                        <div class="input-group mb-3 bg-white">
                            <input class="form-control form-control-lg" for="pwd" name="pwd" id="pwd" type="password" placeholder="新密码">
                        </div>
                        <input class="btn btn-block btn-lg btn-primary mt-2" type="submit" value="确定"></a>
                    </form>
                </li>
                {% if 4|authorized %}
                <li class="list-inline-item d-block p-0 mr-0 list-view">
                    <a id="change-class" class="last-arrow bb-no"><span class="ti-unlink mr-3"></span>修改班级</a>
                    {{ dropdown('form-change-class', '选择班级', [], 'menu-classes') }}
                </li>
                {% endif %}
            </ul>
        </div>
        <div class="col-sm-12 mt-4">
            <p class="mb-4"><b>其他</b></p>
        </div>
        <div class="col-sm-12">
            <div class="switch-box mb-3 d-flex justify-content-between">
                <h6 id="report" class="mt-1">反馈错误</h6>
                <form id="form-report" method="post" action="/report">
                    <div class="input-group mb-3 mt-3 bg-white">
                        <textarea name="report" class="form-control" cols="30" rows="3" placeholder="输入你遇到的问题"></textarea>
                    </div>
                    <input class="btn btn-block btn-lg btn-primary mt-2" type="submit" value="提交"></a>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#mod-pwd").click(form("#form-mod-pwd"));
        $("#change-class").click(form("#form-change-class"));
        $("#report").click(form("#form-report"));
    });
    function changeClass(id) {
        $.post("/change-class", {
            id: id
        }, function(data) {
            messagebox(data.type)(data.message);
            $(location).attr("href", "/")
        })
    }
</script>
{% if 4|authorized %}
<script>
    $(document).ready(function() {
        $.get("/ajax/class", function(data) {
            data.forEach(function(cls) {
                $("#menu-classes").append(`<a href="javascript:changeClass(${cls.id})" class="dropdown-item">${cls.name}</a>`);
            })
        });
    });
</script>
{% endif %}
{% endblock %}